<template>
  <div class="tab">
    <img alt="apkdock icon" src="/title.png"/>
    <div class="navTab">
      <a style="margin-left: 0px;" :href="prefix + '/'">{{ $t('home') }}</a>
      <a :href="prefix + '/games'">{{ $t('games') }}</a>
      <a :href="prefix + '/apps'">{{ $t('apps') }}</a>
      <a :href="prefix + '/howto'">{{ $t('howto') }}</a>
    </div>
    <div style="margin-left: auto;">
      <div class="pcNav">
        <a-auto-complete style="width: 400px" v-model:value="searchText" :options="historyOptions" placeholder="Search"
          @select="handleSelect">
          <template #prefix>
            <SearchOutlined />
          </template>
          <!-- 自定义下拉选项样式 -->
          <template #option="item">
            <div class="searchItem">
              <svg class="clock" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"
                fill="none">
                <g clip-path="url(#clip0_16016_100)">
                  <path
                    d="M7.00002 3.5V7L9.33335 8.16666M12.8334 7C12.8334 10.2217 10.2217 12.8333 7.00002 12.8333C3.77836 12.8333 1.16669 10.2217 1.16669 7C1.16669 3.77834 3.77836 1.16666 7.00002 1.16666C10.2217 1.16666 12.8334 3.77834 12.8334 7Z"
                    stroke="#9DA2AD" stroke-linecap="round" stroke-linejoin="round" />
                </g>
                <defs>
                  <clipPath id="clip0_16016_100">
                    <rect width="14" height="14" fill="white" />
                  </clipPath>
                </defs>
              </svg>
              <span class="searchText">{{ item.value }}</span>
              <svg @click.stop="removeHistory(item)" style="margin-left:auto " xmlns="http://www.w3.org/2000/svg"
                width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="#9DA2AD" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </div>
          </template>
        </a-auto-complete>
        <!-- 注释多语言图标 -->
        <!-- <svg style="margin-top: 6px;margin-left: 0.75rem;" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
          viewBox="0 0 20 20" fill="none">
          <g clip-path="url(#clip0_10183_650)">
            <path
              d="M18.3333 10C18.3333 14.6024 14.6023 18.3333 9.99996 18.3333M18.3333 10C18.3333 5.39763 14.6023 1.66667 9.99996 1.66667M18.3333 10H1.66663M9.99996 18.3333C5.39759 18.3333 1.66663 14.6024 1.66663 10M9.99996 18.3333C7.86016 16.0865 6.66663 13.1027 6.66663 10C6.66663 6.89728 7.86016 3.91346 9.99996 1.66667M9.99996 18.3333C12.1398 16.0865 13.3333 13.1027 13.3333 10C13.3333 6.89728 12.1398 3.91346 9.99996 1.66667M1.66663 10C1.66663 5.39763 5.39759 1.66667 9.99996 1.66667"
              stroke="#505662" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </g>
          <defs>
            <clipPath id="clip0_10183_650">
              <rect width="20" height="20" fill="white" />
            </clipPath>
          </defs>
        </svg> -->

      </div>
      <div class="moblieNav">
        <svg  @click="search" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path
            d="M17.5 17.5L13.9167 13.9167M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
            stroke="#505662" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <svg  style="margin-left: 2rem" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
          fill="none">
          <path d="M17.5 10H7.5M17.5 15H5.83333M17.5 5H2.5" stroke="#505662" stroke-width="1.5" stroke-linecap="round"
            stroke-linejoin="round" />
        </svg>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue'
const searchText = ref('');
const historyOptions = ref([
  {
    value: "Home"
  },
  {
    value: "Games"
  }
]);
const router = useRouter()
const route = useRoute()

const prefix = ref(route.params.hasOwnProperty('language') ? '/' + route.params.language : '')
const search = () => {
  router.push('/search')
}// 选中选项时触发
const handleSelect = (value) => {
  console.log(value)
};

// 输入时触发（可做实时搜索）
const handleSearch = (value) => {
  console.log(value)
};

// 添加历史记录
const addHistory = (value) => {

};

// 删除单条历史记录
const removeHistory = (value) => {
  historyOptions.value = historyOptions.value.filter((item) => {
    return item.value !== value.value;
  })
};
</script>
<style scoped>
.nav {
  display: flex;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
}

.tab {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.tabFont {
  color: #775CE1;
  font-family: 'Rubik One', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 72px;
  margin-left: 6px;
}

@media screen and (max-width: 1280px) {
  .tabFont {
    line-height: 64px
  }
}

.navTab {
  margin-left: 4.5rem;
}

.navTab a {
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  /* 142.857% */
  text-transform: capitalize;
  margin-left: 2.5rem;
}

.pcNav {
  display: flex;
}

.searchItem {
  display: flex;
  min-height: 40px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}

.searchItem:hover .searchText {
  color: #775CE1;
}

.searchItem:hover .clock path {
  stroke: #775CE1 !important;
}

.searchText {
  color: #6E727E;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}

:deep(.ant-select-selector) {
  border-radius: 4px !important;
}

.moblieNav {
  display: none;
}

@media screen and (max-width: 1280px) {
  .navTab {
    display: none;
  }

  .pcNav {
    display: none;
  }

  .moblieNav {
    display: flex;
  }
}
a{
  color:#505662
}
a:hover{
  color:#775CE1
}
@media screen and (max-width: 768px) {
  .navTab {
    display: none;
  }

  .pcNav {
    display: none;
  }

  .moblieNav {
    display: flex;
  }
}
</style>